<template>
  <div class="collectTab">
    <button-tab style="width: 60%; margin: 0 auto">
      <button-tab-item selected @on-item-click="selectCollect = 0">样板工程</button-tab-item>
      <button-tab-item @on-item-click="selectCollect = 1"><span class="vux-reddot-s">家装套餐</span></button-tab-item>
    </button-tab>

    <SampleCp
      v-for="sample of sampleList"
      :key="sample.id"
      :sample="sample"
      v-show="selectCollect === 0"
      :isUserPage="true"
    ></SampleCp>

    <flexbox v-for="(productList, index) of productFmt" :key="index" v-show="selectCollect === 1" class="product-block">
      <flexbox-item v-for="product of productList" :key="product.id">
        <ProductCp :product="product" :class="product.id % 2 !== 0 ? 'left' : 'right'" :isUserPage="true"></ProductCp>
      </flexbox-item>
    </flexbox>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Flexbox, FlexboxItem } from 'vux'
import ProductCp from './productCp'
import SampleCp from './sampleCp'

export default {
  props: {
  },
  components: {
    ButtonTab,
    ButtonTabItem,
    Flexbox,
    FlexboxItem,
    ProductCp,
    SampleCp
  },
  data () {
    return {
      selectCollect: 0,
      sampleList: [
        {
          id: 1,
          mainImage: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/sample/006799699800-844590-s5.jpg'
        }, {
          id: 2,
          mainImage: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/sample/1-754750-s5.jpg'
        }
      ],
      productFmt: [
        [{
          id: 1,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/213177291fb943d7b113f1ee41c38ac8.jpg',
          name: '往后余生',
          price: 10000
        }, {
          id: 2,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/347f095fc0ee456fa8f9767d4b17aeca.jpg',
          name: '风雪是你',
          price: 10000
        }], [{
          id: 3,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/378f98e2a3fe480996804cc91b8edb3a.jpg',
          name: '平淡是你',
          price: 20000
        }, {
          id: 4,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/39badb31391643b5bcb90adee45c9922.jpg',
          name: '清贫也是你',
          price: 30000
        }]
      ]
    }
  },
  watch: {
  },
  methods: {

  }
}
</script>

<style lang="less">
.collectTab {
  .product-block {
    width: 96%;
    margin: 0 auto;
  }
}
</style>
